<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>订单详情</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css?v=1" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/dl_order_detail.css?v=3" />
    <style>
        body {
            font-size: 0.75rem;
        }

        textarea.ordernum {
            width: 80%;
            float: left;
            min-height: 1rem;
            max-height: 2rem;
            line-height: 0.8rem;
            padding-top: 0.1rem;
            font-size: 14px;
            text-align: right;
        }

        .fr {
            float: right;
        }

        .fl {
            float: left;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <!-- 取消订单 -->
        <van-dialog v-model="show" title="提示信息" :before-close="beforeClose" show-cancel-button>
            <div class="dialog_tishi">订单取消后无法进行任何其它操作，是否确认取消订单？</div>
        </van-dialog>
        <div class="bodymain" style="padding-bottom: 60px;">
            <div class="order_top">
                <div class="order_status">{{form.OrderStatusDesc}}</div>
            </div>
            <div class="order_detail aui-margin-t-15">
                <div class="or_detail_main">
                    <div v-if="form.OrderLog" class="newsteps" >
                        <div class="newstatus">
                            <i class="icon iconfont icon-xuanzhong1" style="font-size: 16.5px;font-weight: bold;"></i>
                            <span>{{form.OrderLog.Title}}</span>
                            <i v-on:click="do_openStep()" class="icon iconfont icon-xiangyoujiantou aui-font-size-12" style="float: right;"></i>
                        </div>
                        <div  class="stepdec">
                            {{form.OrderLog.Content}}
                            <span v-if="form.OrderLog.ContactName">配送员：<span  class="bluecolor"
                                v-on:click="tel_phone(form.OrderLog.ContactPhone)">{{form.OrderLog.ContactName}}
                                {{form.OrderLog.ContactPhone}}</span></span>
                        </div>
                    </div>

                    <div class="addressdec aui-margin-t-0" style="position: relative;">
                        <div style="width: 80%;">
                            <div class="newstatus">
                                <i class="icon iconfont icon-addressdizhi font-weight" style="font-size: 18px;"></i>
                                <span>{{form.AddressUserName}}</span><span
                                    style="margin-left: 10px;">{{form.AddressPhoneNumber}}</span>
                            </div>
                            <div class="stepdec">收货地址：{{form.AddressDetailInfo}}</div>
                        </div>

                        <div v-on:click="tel_phone(form.AddressPhoneNumber)" class="order_right_phone fr">
                            <div><label class="icon-callphone"><i class="icon iconfont icon-dianhua11"></i></label>
                            </div>
                            <div class="lianxi-right" style="margin-top: -2px;">联系顾客</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order_detail">
                <div class="or_detail_main">
                    <div class="newsteps">
                        <div class="newstatus">
                            <i class="icon iconfont icon-xianshidazhe aui-font-size-16" style="font-weight: bold;"></i>
                            预约时间：<label class="bluecolor">{{form.AppointmentTime}}-{{form.AppointmentEndTime}}</label>
                            送达
                            <label v-if="form.AppointmentTimeOutDesc&&(form.OrderStatus==7||form.OrderStatus==5)" class="label-btn-red">{{form.AppointmentTimeOutDesc}}</span>
                        </div>
                        <div class="newstatus aui-margin-t-0">
                            <i class="icon iconfont icon-rili aui-font-size-16" style="font-weight: bold;"></i>
                            预计重量：<label class="bluecolor">{{form.AllWeight}}</label> Kg
                        </div>
                        <div v-if="form.UserNote" class="aui-margin-t-0 label-btn-red label-btn-blue">{{form.UserNote}}
                        </div>
                    </div>

                </div>
            </div>
            <div class="order_detail">
                <!--商家信息-->
                <div v-if="form.BusinessInfo" class="border-bottomLine">
                    <ul class="aui-list aui-media-list" style="background-size:100% 0px;">
                        <li class="aui-list-item" style="border-bottom:0;background-size:100% 0px;">
                            <div class="aui-media-list-item-inner" style="position: relative;">
                                <div class="aui-list-item-media">
                                    <img :src="form.BusinessInfo.CoverImage" />
                                </div>
                                <div class="aui-list-item-inner aui-margin-t-0">
                                    <div class="pro-list-item-title aui-ellipsis-2">
                                        {{form.BusinessInfo.BusinessName}}
                                    </div>
                                    <div class="aui-margin-t-10">
                                        <span class="aui-font-size-12"
                                            style="color: #999;">{{form.BusinessInfo.BusinessAddress}}</span>
                                    </div>
                                </div>
                                <div v-on:click="tel_phone(form.BusinessInfo.BusinessContactPhone)"
                                    class="order_right_phone fr aui-margin-t-15">
                                    <div><label class="icon-callphone"><i
                                                class="icon iconfont icon-dianhua11"></i></label>
                                    </div>
                                    <div class="lianxi-right" style="margin-top: -5px;">联系商家</div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--商品信息-->
                <div class="order_product">
                    <!-- <div class="productlist_title">
                        商品信息
                        <span>共{{form.AllQuantity}}件/{{form.AllWeight}}KG</span>
                    </div> -->
                    <ul class="aui-list aui-media-list" style="background-size:100% 0px;">
                        <li class="aui-list-item" v-for="item in form.ProductList">
                            <div class="aui-media-list-item-inner btn_line">
                                <div class="aui-list-item-media">
                                    <img :src="item.GoodsCoverImage" />
                                </div>
                                <div class="aui-list-item-inner">
                                    <div class="pro-list-item-title aui-ellipsis-2">
                                        {{item.ProductName}}
                                    </div>
                                    <div class="pro_dis">
                                        ￥<span>{{item.Price}}x{{item.Quantity}}</span>
                                    </div>
                                </div>
                                <div class=" pro_price" style="margin: 12px 0 0 0;">
                                    <div class="item_price">
                                        <span>x{{item.TotalPrice}}</span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- <div v-if="form.ProductList!=undefined&&form.ProductList.length>5" class="allproduct">查看全部<i
                                class="icon iconfont icon-zhankai"></i></div> -->
                    </ul>
                    <div class="order_pro_fw">
                        <div class="xiaoji">
                            实付金额：<span class="xj_fh">￥</span><span class="xj_price">{{form.LastTotalCost}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order_detail">
                <div class="detail_msg_main">
                    <!-- <div class="productlist_title" style="margin-left: 0px;">
                        订单信息
                    </div> -->
                    <div class="detail_msg_dd aui-margin-b-0">
                        <div class="msg_item ">
                            <div class="msgitem_title fl" style="width: 25%;">订单编号</div>
                            <div class="msgitem_dec fr" style=" width: 74%; position: relative;">
                                <textarea class="ordernum" type="text" id="dindan" v-model="form.OrderNumber" readonly
                                    unselectable="on" style="height:20px;"></textarea>
                                <span class="copy" v-on:click="copy_txt()">复制</span>
                            </div>
                        </div>
                        <div class="msg_item ">
                            <div class="msgitem_title fl">下单时间</div>
                            <div class="msgitem_dec fr">{{form.AddTime}}</div>
                        </div>
                        <div class="msg_item">
                            <div class="msgitem_title fl">支付方式</div>
                            <div class="msgitem_dec fr">{{form.PaymentMethodDesc}}</div>
                        </div>
                        <div class="msg_item">
                            <div class="msgitem_title fl">支付时间</div>
                            <div class="msgitem_dec fr">{{form.PayTime}}</div>
                        </div>
                        <div class="msg_item">
                            <div class="msgitem_title fl">配送方式</div>
                            <div class="msgitem_dec fr">{{form.SendTypeDesc}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="form.OrderStatus==1||form.OrderStatus==4" class="pagebtn">
            <div v-if="form.OrderStatus==4" class="buttom sortwidth mr4 fr" v-on:click="do_deleteorder()">删除</div>
            <div v-if="form.OrderStatus==1" class="buttom sortwidth mr4 fr" v-on:click="do_removeorder()">取消订单</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript " src="../script/moment/moment.js"></script>
<script type="text/javascript " src="js/dl_order_detail.js"></script>
<script type="text/javascript">
</script>

</html>